<template>
  <div class="custom-el-main">
    <el-container>
      <el-main>
        <div class="container el-custom-table-container">
          <table-componets-vue
            ref="table1"
            :isShowButton="true"
            :Sizes="sizes"
            :layout="layout"
            @PageChange="PageChange"
            :currentPage="query.page"
            :pageSize="query.pageSize"
            @tableEvent="tableEvent"
            :loading="tableLoading"
            :isQuery="1 == 1"
            :tables="tables"
            :isOpertions="1 == 1"
          ></table-componets-vue>
        </div>
      </el-main>
    </el-container>
    <el-drawer
      :append-to-body="true"
      :withHeader="false"
      v-model="showdrawer"
      direction="rtl"
      size="52%"
    >
      <form-details-componet-vue
        :apipath="apipath"
        ref="formData"
        :getway="way"
        @FormEvent="FormEvent"
        :pageTitle="page_Title"
        :pageType="pageType"
      ></form-details-componet-vue>
    </el-drawer>
  </div>
</template>
<script>
import reqVue from "../../utils/req.vue";
import TableComponetsVue from "../../components/TableComponets.vue";
import confVue from "../../utils/conf.vue";
import FormDetailsComponetVue from "../../components/form/FormDetailsComponet.vue";

let windowHeight = parseInt(window.innerHeight);
let windowinnerWidth = parseInt(window.innerWidth);
export default {
  components: {
    TableComponetsVue,
    FormDetailsComponetVue,
  },
  data() {
    return {
      trees: [],
      windowHeight: windowHeight,
      windowinnerWidth: windowinnerWidth,
      autoHeight: {},
      outHeight: {
        height: "",
      },
      tables: {},
      sizes: confVue.$size,
      layout: confVue.$layout,
      query: {
        page: 0,
        pageSize: 15,
      },
      btns: [],
      showdrawer: false,
      page_Title: "",
      pageType: "add",
      tableLoading: true,
      formLoading: true,
      apipath: "form",
      treeloadig: false,
      way: confVue.$formApi,
    };
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  created() {
    this.treeloadig = true;
    this.InitTable(null);
  },
  methods: {
    getHeight() {
      this.outHeight.height = windowHeight - 190 + "px";
      this.autoHeight.height = windowHeight - 190 + "px";
    },
    InitTable(queryModel) {
      this.$store.commit("closePages", "formset");
      this.tableLoading = true;
      if (queryModel != undefined && queryModel != null) {
        this.query = queryModel;
      } else {
        this.query.page = 1;
        this.query.pageSize = 15;
      }
      reqVue.$Post(this.query, this.apipath + "/v1.0/pages", this.way).then(
        function(data) {
          if (data.status) {
            this.tables = data.body;
            this.total = data.total;
            this.btns = data.operations;
            this.tableLoading = false;
          } else {
            this.$message.error(data.message);
            window.location.href = "/";
          }
        }.bind(this)
      );
    },
    PageChange(queyModel) {
      this.InitTable(queyModel);
    },
    tableEvent(btn) {
      this.deleteEvent(btn.data);
      this.editorEvent(btn.data);
      this.enableEvent(btn.data);
      this.fieldSetEvent(btn.data);
    },
    ///禁用
    enableEvent(btn) {
      if (btn.value == "enable" || btn.value == "unloaded") {
        this.$confirm(
          btn.value == "enable"
            ? this.$t("i18n.confirm_enable")
            : this.$t("i18n.confirm_unloaded"),
          this.$t("i18n.confirm"),
          {
            type: "warning",
          }
        ).then(() => {
          reqVue
            .$Post(
              null,
              this.apipath + "/v1.0/uninstall/" + btn.primaryKeyValue,
              this.way
            )
            .then(
              function(data) {
                if (data.status) {
                  let queryModel = {};
                  queryModel.currentPage = this.query.page;
                  queryModel.pageSize = this.query.pageSize;
                  this.PageChange(queryModel);
                } else {
                  this.$message.error(data.message);
                }
              }.bind(this)
            );
        });
      }
    },
    ///删除
    deleteEvent(btn) {
      if (btn.value == "delete") {
        this.$confirm(this.$t("i18n.confirm_del"), this.$t("i18n.confirm"), {
          type: "warning",
        }).then(() => {
          reqVue
            .$Post(
              null,
              this.apipath + "/v1.0/del/" + btn.primaryKeyValue,
              this.way
            )
            .then(
              function(data) {
                if (data.status) {
                  let queryModel = {};
                  queryModel.currentPage = this.query.page;
                  queryModel.pageSize = this.query.pageSize;
                  this.PageChange(queryModel);
                } else {
                  this.$message.error(data.message);
                }
              }.bind(this)
            );
        });
      }
    },
    ///编辑
    editorEvent(btn) {
      this.formLoading = true;
      if (btn.value == "add") {
        this.showdrawer = true;
        this.page_Title = this.$t("table.Global_Add");
        this.pageType = btn.value;
      }
      if (btn.value == "edit") {
        this.showdrawer = true;
        this.page_Title = this.$t("table.Global_Edit");
        this.pageType = btn.value;
      }
      if (btn.value == "detaile") {
        this.showdrawer = true;
        this.page_Title = this.$t("table.Global_Detail");
        this.pageType = "view";
      }
      if (btn.value == "add" || btn.value == "edit" || btn.value == "detaile")
        this.$nextTick(function() {
          this.$refs["formData"].LoadModel(btn, this.pageType);
        });
    }, ///字段管理
    fieldSetEvent(btn) {
      if (btn.value == "set") {
        this.$store.commit("closeCurrentPage", this.$route.fullPath);
        this.$router.push({
          path: "/formset",
          query: { formid: btn.primaryKeyValue, version: btn.keyFieldValue },
        });
      }
    },
    FormEvent(model) {
      if (model != null && model != undefined) {
        let url = "";
        if (model.autoId > 0) {
          url = "edit";
        } else {
          url = "add";
        }
        this.$confirm(this.$t("i18n.confirm_save"), this.$t("i18n.confirm"), {
          type: "warning",
        }).then(() => {
          reqVue.$Post(model, this.apipath + "/v1.0/" + url, this.way).then(
            function(data) {
              if (data.status) {
                let queryModel = {};
                queryModel.currentPage = 1;
                queryModel.pageSize = this.query.pageSize;
                this.showdrawer = false;
                this.PageChange(queryModel);
              } else {
                this.$message.error(data.message);
              }
            }.bind(this)
          );
        });
      } else {
        this.showdrawer = false;
      }
    },
  },
};
</script>
